<template>
	<globalModal :title="title" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<a-form-item label="部门">
					<a-input
						placeholder="请选择部门"
						v-decorator="[
							'deptId',
							{
								rules: [{ required: true, message: '请选择部门' }]
							}
						]"
						readOnly
						style="display: none"
					/>

					<span class="ant-input-group-wrapper">
						<span class="ant-input-wrapper ant-input-group">
							<input v-model="deptName" placeholder="请选择部门" type="text" readonly="true" class="ant-input" />
							<span class="ant-input-group-addon"><a-icon @click="changeDept" slot="addonAfter" type="setting" style="cursor: pointer" /></span>
						</span>
					</span>
				</a-form-item>
				<a-form-item label="接收器类型">
					<a-select
						allowClear
						placeholder="请选择接收器类型"
						v-decorator="['machType', { rules: [{ required: true, message: '请选择接收器类型' }] }]"
					>
						<a-select-option :value="item.value" v-for="(item, index) in machTypeEnum" :key="item.gradeId">{{ item.text }}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="接收器ID">
					<a-input
						placeholder="接收器ID"
						v-decorator="[
							'machId',
							{
								rules: [{ required: true, message: '请输入接收器ID' }, { max: 10, message: '接收器ID不超过10个字符' }],
								getValueFromEvent: removeSpaces
							}
						]"
					/>
				</a-form-item>
				<a-form-item label="有效期">
					<a-select allowClear placeholder="请选择有效期" v-decorator="['expiryDate', { rules: [{ required: false, message: '请选择有效期' }] }]">
						<a-select-option :value="item.itemCode" v-for="(item, index) in expiryDateList" :key="item.itemCode">{{ item.itemName }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-spin>
		<change-dept-modal ref="changeDeptModal" @selectDept="selectDept"></change-dept-modal>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import { machTypeEnum } from '@/utils/enumeration';
import changeDeptModal from '@/components/changeDeptModal.vue';
export default {
	name: 'addOrEditDeviceTypeModal',
	mixins: [ModalMixins],
	components: {
		changeDeptModal
	},
	data() {
		return {
			machTypeEnum, //设备类型
			expiryDateList: [], //有效期数组
			deptName: '',
			deptList: [], //所属部门列表
			initMachType:null
		};
	},
	created() {},
	methods: {
		initInfo(record = {}) {
			this.mdl = Object.assign({}, record);
			this.title = (this.isAdd ? '新增' : '编辑') + this.modalTitle;
			this.visible = true;
			//获取一些初始下拉数据
			this.getDefaultList && this.getDefaultList();
		},
		async getDefaultList() {
			this.deptName = this.mdl.deptName || '';
			let deptId = this.mdl.deptId ? this.mdl.deptId : '';
			this.initMachType = this.mdl.machType || this.mdl.machType == 0 ? this.mdl.machType : null;
			if (this.expiryDateList.length == 0) {
				await this.getDictItemKeyList(['EXPIRY_DATE']);
			}			
			this.$nextTick(() => {
				this.form.resetFields();
				this.setFieldsValue();
			});
		},
		

		//查询有效期
		getDictItemKeyList(keys) {
			var param = keys;
			this.$postAction(sysManageapi.dictUrl.getDictItemKeyList, param).then(res => {
				if (res.code == 1) {
					this.expiryDateList = res.data.EXPIRY_DATE;
				}
			});
		},
		changeDept(value) {
			if (this.isAdmin && !this.globalOrgId) {
				this.$message.error('请先选择一个机构');
				return false;
			}
			this.$refs.changeDeptModal.show(this.globalOrgId);
		},
		selectDept(dept) {
			this.deptName = dept.deptName;
			this.$nextTick(() => {
				this.form.setFieldsValue({
					deptId: dept.deptId,
					gradeId: undefined
				});
				this.getGradeList(dept.deptId);
			});
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					console.log('val', values);
					let parameter = Object.assign(
						{},
						values,
						this.mdl.deviceId
							? {
									deviceId: this.mdl.deviceId,
									orgId: this.globalOrgId,
									deptName: this.deptName
							  }
							: ''
					);
					_this.confirmLoading = true;
					this.$postAction(_this.isAdd ? sysManageapi.classUrl.add : sysManageapi.classUrl.edit, parameter)
						.then(res => {
							if (res && res.code == 1) {
								_this.$message.success('保存成功');
								_this.$emit('ok', _this.isAdd);
								_this.form.resetFields();
								_this.visible = false;
							}
						})
						.finally(() => {
							_this.confirmLoading = false;
						});
				}
			});
		}
	}
};
</script>
<style scoped lang="less">
/deep/ .ant-checkbox-group {
	margin: 0 -4px;
}

/deep/ .ant-checkbox-wrapper {
	margin: 0 4px;
}
</style>

